<template>
  <div class="wrapper">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>结算管理</el-breadcrumb-item>
      <el-breadcrumb-item>营业额查询</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="easy-content">
      <el-form>
        <p class="title">会员信息</p>
        <el-form-item>
          <div class="member-info clearfix">
            <el-row :gutter="24"
              align="center">
              <el-col :span="4"
                style="min-width:320px">
                <el-row align="middle">
                  <el-col :span="11"
                    class="total"
                    style=" background: #e9ecf3;">
                    <div></div>
                    <div>
                      <div>会员总数</div>
                      <span>{{memberNum.num}}</span>
                    </div>
                    <div></div>
                  </el-col>
                  <el-col :span="11"
                    class="class">
                    <div>
                      <div>会员邀请</div>
                      <span>{{memberNum.memberNum}}</span>
                    </div>
                    <div>
                      <div>员工邀请</div>
                      <span>{{memberNum.staffNum}}</span>
                    </div>
                    <div>
                      <div>自主注册</div>
                      <span>{{memberNum.oneselfNum}}</span>
                    </div>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="16"
                class="right">
                <el-row>
                  <el-col :span="4">
                    <div>
                      <div>昨日</div>
                      <span>{{memberNum.mToDayNum}}</span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div>
                      <div>7日内</div>
                      <span>{{memberNum.mSevenDayNum}}</span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div>
                      <div>30天内</div>
                      <span>{{memberNum.mThirtyDayNum}}</span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div>
                      <div>本月</div>
                      <span>{{memberNum.mThisMonthNum}}</span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div>
                      <div>上月</div>
                      <span>{{memberNum.mLastMonthNum}}</span>
                    </div>
                  </el-col>
                  <el-col :span="4"></el-col>
                </el-row>
                <el-row>
                  <el-col :span="4">
                    <div>
                      <div></div>
                      <span>{{memberNum.sToDayNum}}</span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div>
                      <div></div>
                      <span>{{memberNum.sSevenDayNum}}</span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div>
                      <div></div>
                      <span>{{memberNum.sThirtyDayNum}}</span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div>
                      <div></div>
                      <span>{{memberNum.sThisMonthNum}}</span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div>
                      <div></div>
                      <span>{{memberNum.sLastMonthNum}}</span>
                    </div>
                  </el-col>
                  <el-col :span="4">

                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="4">
                    <div>
                      <div></div>
                      <span>{{memberNum.oToDayNum}}</span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div>
                      <div></div>
                      <span>{{memberNum.oSevenDayNum}}</span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div>
                      <div></div>
                      <span>{{memberNum.oThirtyDayNum}}</span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div>
                      <div></div>
                      <span>{{memberNum.oThisMonthNum}}</span>
                    </div>
                  </el-col>
                  <el-col :span="4">
                    <div>
                      <div></div>
                      <span>{{memberNum.oLastMonthNum}}</span>
                    </div>
                  </el-col>
                  <el-col :span="4">

                  </el-col>
                </el-row>
              </el-col>

            </el-row>
          </div>
        </el-form-item>

      </el-form>
      <el-form :inline="true">
        <el-form-item>
          <el-dropdown @command="setTime">
            <span class="el-dropdown-link">
              {{timeStr}}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="{value: '0', title: '时间类型' }">时间类型</el-dropdown-item>
              <el-dropdown-item :command="{value: '1', title: '入住时间' }">入住时间</el-dropdown-item>
              <el-dropdown-item :command="{value: '2', title: '离店时间' }">离店时间</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="startEndTime"
            size="small"
            :disabled="time==0"
            style="height:34px;width:230px"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
            @click.native="_saleList"
            size="small"
            style="width:60px">
            <i class="el-icon-search"></i>
          </el-button>
        </el-form-item>
      </el-form>
      <h3>总营业额
        <span style="color:red;margin-left:20px">￥{{this.expendType.sum}}</span>
      </h3>
      <div class="chart-wrap">
        <div id="myChart_1">

        </div>
        <div id="myChart_2">

        </div>
      </div>
      <div class="chart-wrap">
        <div id="myChart_3">

        </div>
        <div id="myChart_4">

        </div>

      </div>

    </div>
  </div>
</template>

<script>
import { saleList } from "@/public/js/turnoverEnquiry";
export default {
  components: {},
  props: {},
  data() {
    return {
      time: 0,
      startEndTime: [],
      memberNum: "",
      expendType: "",
      marketingType: "",
      valid: "",
      average: "",
      timeStr: "时间类型"
    };
  },
  watch: {},
  computed: {},
  methods: {
    setTime(type) {
      this.time = type.value;
      this.timeStr = type.title;
      if (type.value == 0) {
        this.startEndTime = [];
      }
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart_1 = this.$echarts.init(document.getElementById("myChart_1"));
      let myChart_2 = this.$echarts.init(document.getElementById("myChart_2"));
      let myChart_3 = this.$echarts.init(document.getElementById("myChart_3"));
      let myChart_4 = this.$echarts.init(document.getElementById("myChart_4"));
      // 绘制图表
      myChart_1.setOption({
        title: {
          text: "按费用类型",
          subtext: "￥" + this.expendType.sum, //副标题文本样式
          subtextStyle: {
            color: "red"
          },
          x: "center",
          textAlign: "center",
          textStyle: {
            //文字颜色
            fontStyle: "normal",
            //字体系列
            fontFamily: "sans-serif",
            //字体大小
            fontSize: 14
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        legend: {
          bottom: 25,
          data: ["房费", "Mini吧消费", "取消订单手续费"]
        },
        series: {
          type: "pie",
          radius: "60%",
          center: ["48%", "45%"],
          data: this.setDataCharts(this.expendType)
        }
      });
      myChart_2.setOption({
        title: {
          text: "按营销类型",
          subtext: "￥" + this.expendType.sum, //副标题文本样式
          subtextStyle: {
            color: "red"
          },
          x: "center",
          textAlign: "center",
          textStyle: {
            //文字颜色
            fontStyle: "normal",
            //字体系列
            fontFamily: "sans-serif",
            //字体大小
            fontSize: 14
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        legend: {
          bottom: 25,
          data: ["自主下单", "会员营销", "员工营销"]
        },
        series: {
          type: "pie",
          radius: "60%",
          center: ["48%", "45%"],
          data: this.setDataCharts(this.marketingType)
        }
      });

      myChart_3.setOption({
        title: {
          text: "有效出租时间",
          subtext: this.valid.valid, //副标题文本样式
          subtextStyle: {
            color: "red"
          },
          x: "center",
          textAlign: "center",
          textStyle: {
            //文字颜色
            fontStyle: "normal",
            //字体系列
            fontFamily: "sans-serif",
            //字体大小
            fontSize: 14
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        legend: {
          bottom: 25,
          data: ["自主下单", "会员营销", "员工营销"]
        },
        series: {
          type: "pie",
          radius: "60%",
          center: ["48%", "45%"],
          data: this.setDataCharts(this.valid, 1)
        }
      });
      myChart_4.setOption({
        title: {
          text: "平均房价",
          subtext: this.average.valid, //副标题文本样式
          subtextStyle: {
            color: "red"
          },
          x: "center",
          textAlign: "center",
          textStyle: {
            //文字颜色
            fontStyle: "normal",
            //字体系列
            fontFamily: "sans-serif",
            //字体大小
            fontSize: 14
          }
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)"
        },
        legend: {
          bottom: 25,
          data: ["自主下单", "会员营销", "员工营销"]
        },
        series: {
          type: "pie",
          radius: "60%",
          center: ["48%", "45%"],
          data: this.setDataCharts(this.average)
        }
      });
      setTimeout(function() {
        window.onresize = function() {
          myChart.resize();
        };
      }, 200);
    },
    _saleList() {
      saleList({
        time: this.time,
        startTime: this.startEndTime ? this.startEndTime[0] : "",
        endTime: this.startEndTime ? this.startEndTime[1] : ""
      }).then(res => {
        this.memberNum = res.data.memberNum;
        this.expendType = res.data.expendType;
        this.marketingType = res.data.marketingType;
        this.valid = res.data.valid;
        this.average = res.data.average;
        this.drawLine();
      });
    },
    setDataCharts(typeData, type) {
      let data = [];
      for (var i in typeData) {
        if (i == "roomMoney") {
          data.push({
            value: typeData[i],
            name: `房费`
          });
        } else if (i == "miniMoney") {
          data.push({
            value: typeData[i],
            name: `Mini吧消费`
          });
        } else if (i == "cancelMoney") {
          data.push({
            value: typeData[i],
            name: `取消订单手续费`
          });
        } else if (type != 1) {
          if (i == "oneselfMoney") {
            data.push({
              value: typeData[i],
              name: `自主下单`
            });
          } else if (i == "userMoney") {
            data.push({
              value: typeData[i],
              name: `会员营销`
            });
          } else if (i == "staffMoney") {
            data.push({
              value: typeData[i],
              name: `员工营销`
            });
          }
        } else if (type == 1) {
          if (i == "oneselfMoney") {
            data.push({
              value: typeData[i],
              name: `自主下单`
            });
          } else if (i == "userMoney") {
            data.push({
              value: typeData[i],
              name: `会员营销`
            });
          } else if (i == "staffMoney") {
            data.push({
              value: typeData[i],
              name: `员工营销`
            });
          }
        }
      }
      console.log(data);
      return data;
    }
  },
  created() {
    this._saleList();
  },
  mounted() {
    //this.drawLine();
  }
};
</script>
<style lang="scss" scoped>
.wrapper {
  .chart-wrap {
    display: flex;
    align-items: center;
    text-align: center;
    & > div {
      flex: 1;
      height: 450px;
      margin-bottom: 40px;
    }
  }
  .title {
    font-size: 16px;
    color: #6d2377;
    padding: 20px;
  }
  .member-info {
    line-height: 17px;
    text-align: center;
    & span {
      color: red;
    }
    .total {
      font-size: 14px;
      margin-right: 10px;
      & > div {
        height: 36px;
        padding: 10px;
      }
    }
    .class {
      font-size: 14px;
      & > div {
        background: #e9ecf3;
        padding: 10px;
        margin-bottom: 9px;
        height: 30px;
        &:last-child {
          margin-bottom: 0px;
        }
      }
    }
    .right {
      font-size: 14px;
      .el-col-4 {
        & > div {
          padding: 10px;
          margin-bottom: 2px;
          & > div {
            height: 16px;
          }
        }
      }
    }
  }
}
</style>